<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css"/>
    <link rel="stylesheet" href="../../style/shoppingCart.css"/>
    <link rel="stylesheet" href="../../element-ui/index.css"/>
    <style>
        .el-button--primary {
            width: 80px !important;
            color: #333333;
            background-color: rgb(255,118,0);
            border-color: rgb(255,118,0);
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <div>
                <div style="background-color: rgb(245,245,245) ;
            width: 100%;display: flex;justify-content: space-around">
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal">
                            <el-menu-item v-show="showUser" style="color: rgb(255,68,0) !important;" index="1"><a
                                    href="login.html">亲，请登录</a></el-menu-item>
                            <el-submenu v-show="!showUser" index="1">
                                <template style="" slot="title">
                                    <a style="color: rgb(255,68,0) !important;"
                                       href="user.html">欢迎您，{{user.username}}</a></template>
                                <el-menu-item style="height: 80px" index="2-1">
                                    <div style="">
                                        <a href="user.html">
                                            <el-image
                                                    style="width: 70px; height: 70px; border: none;border-radius: 50%;cursor: pointer;"
                                                    :src="getImage(user.avatar)"
                                                    :preview-src-list="[ `/common/download?name=${user.avatar}` ]">
                                                <div slot="error" class="image-slot">
                                                    <img src="../../style/images/淘公仔2.png"
                                                         style="width: auto; height: 70px; border:none;">
                                                </div>
                                            </el-image>
                                        </a>
                                        <a href="user.html"> &nbsp;&nbsp;账号管理</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a @click="logout()">退出</a>
                                    </div>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item index="2"><a href="register.html">免费注册</a></el-menu-item>
                        </el-menu>
                    </div>
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                        >

                            <el-menu-item index="1"><a href="index.html" target="_blank">返回首页</a></el-menu-item>
                            <el-menu-item index="2"><a href="user.html" target="_blank">我的淘淘</a></el-menu-item>
                            <el-menu-item index="3"><a href="#" target="_blank">我的足迹</a></el-menu-item>
                            <el-menu-item index="4" class="el-icon-shopping-cart-2"
                                          style="color: rgb(255,68,0) !important;font-size: 16px !important;">
                                <a href="shoppingCart.html" target="_blank"
                                   style="color: rgb(108,108,108) !important;font-size: 12px !important;">&nbsp;&nbsp;购物车</a>
                            </el-menu-item>
                            <el-menu-item class="el-icon-star-on" style="font-size: 16px !important;" index="5">
                                <a style="font-size: 12px !important;" href="#" target="_blank">&nbsp;收藏的宝贝
                                </a></el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;width:100%;">
                    <div style=" display: flex;align-items: center;justify-content: space-between;
                    width: 1150px;height: 60px ">
                        <div style="display: flex;align-items: center;">
                            <h1 style="margin: 0 -3px 8px 28px;font-size: 28px;color: rgb(216,30,6);font-weight: bolder">
                                我的</h1>
                            <a href="#">
                                <img style="width: 40px;height: 40px;" src="../../style/images/tao.png">
                            </a>
                            <a href="#">
                                <img style="width: 40px;height: 40px;margin-left: -5px"
                                     src="../../style/images/tao.png">
                            </a>

                        </div>

                    </div>
                </div>
            </div>

        </el-header>
        <el-main class="main"
                 style="background-color: rgb(233,229,229);display: flex;justify-content: center;overflow-y: inherit">
            <div>
                <el-backtop target=".main" style="color: rgb(255,68,0)"></el-backtop>
                <div style="background-color: white;
                width: 1150px;border-radius: 24px;padding: 15px">
                    <div style="display: flex;justify-content: space-between;align-items: center">

                        <div style="font-size: 28px;color: #000;font-weight: bolder;">购物车&nbsp;(全部)</div>
                        <div style="font-size: 16px; ">
                            已选商品(不含运费)&nbsp;&nbsp;&nbsp;
                            <span style="color: rgb(255,68,0) ;font-size: 26px; ">{{totalPrice}}</span>
                            &nbsp;&nbsp;&nbsp;
                            <el-button @click="purchase" :class="totalPrice === 0 ? 'account' : 'accountActive' " round
                                      >结算
                            </el-button>
                        </div>
                    </div>
                    <div style="height: 1px;background-color: rgba(192,196,204,0.46);margin: 30px 0 0 0;"></div>
                    <div>
                        <div class="container" style="height:100%">
                            <div class="shoppingcartHeader">

                                <span>
                                    <el-checkbox
                                            :indeterminate="isIndeterminate"
                                            v-model="checkAll"
                                            @change="handleCheckAllChange">
                                        全选</el-checkbox></span>
                                <span style="width: 250px; ">商品信息</span>
                                <span style="width: 100px; " class="price">单价</span>
                                <span style="width: 40px; ">数量</span>
                                <span style="width: 80px; ">金额</span>
                                <span style="width: 100px;">操作</span>
                            </div>
                            <div :class="goods.checked ? 'goodsActive' : 'goods' " v-for="(goods,index) in goodsList" :key="index">
                                <el-checkbox v-model="goods.checked"
                                             @change="checkedChange(goods.id)"></el-checkbox>

                                <el-image
                                        @click="toGoodsDetail(goods.goodsId)"
                                        style="width: 90px; height: 90px; border: none;cursor: pointer;"
                                        :src="getImage(goods.image)"
                                >
                                    <div slot="error" class="image-slot">
                                        <img src="../../style/404.jpg"
                                             style="width: auto; height: 90px; border:none;">
                                    </div>
                                </el-image>
                                <div class="name">
                                    {{goods.name}}
                                </div>
                                <div>
                                    <span>￥{{goods.price}}</span>
                                    <b style="font-weight: initial;font-size: 12px;text-decoration: line-through;color: #777676">
                                        ￥{{goods.price + 100}}</b>

                                </div>
                                <div>
                                    <el-input-number size="mini"  v-model="goods.number"
                                                     size="small"
                                                     @change="qtyChange(goods)" :min="1"
                                                     :max="10" label="描述文字">

                                    </el-input-number>
                                </div>

                                <div style="color: rgb(255,68,0)">
                                    ￥{{goods.price*goods.number}}
                                </div>
                                <div>
                                    <button class="caozuo">移入收藏夹</button>
                                    <button class="caozuo" @click="deleteGoods('单删',goods.id)">删除</button>
                                </div>
                            </div>
                            <div v-show="goodsList.length === 0" class="empty" style="" >
                                <div>
                                    <img src="../../style/images/empty.png" alt="">
                                    <h3>您的购物车还是空的，赶紧行动吧！您可以：</h3>
                                    <p>看看&nbsp;&nbsp;<a href="collect.html">我的收藏夹</a></p>
                                    <p>看看&nbsp;&nbsp;<a href="index.html" >回到首页继续逛</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="shoppingcartBottom">
                            <div class="bottom-left">
                                <el-checkbox :indeterminate="isIndeterminate"
                                             v-model="checkAll"
                                             @change="handleCheckAllChange">
                                    全选
                                </el-checkbox>
                                <span class="caozuo" @click="deleteGoods('批量',null)">删除</span>
                                <span class="caozuo">移入收藏夹</span>
                            </div>
                            <div style="font-size: 16px; ">
                                已选商品(不含运费)&nbsp;&nbsp;&nbsp;
                                <span style="color: rgb(255,68,0) ;font-size: 26px;font-weight: bold ">{{totalPrice}}</span>
                                &nbsp;&nbsp;&nbsp;
                                <el-button @click="purchase" :class="totalPrice === 0 ? 'account' : 'accountActive' " round
                                           style="">结算
                                </el-button>
                            </div>
                        </div>
                </div>
            </div>
        </el-main>
    </el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../js/axios.min.js"></script>
<script src="../../js/frontInterceptors.js"></script>
<script src="../../js/common.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                selected: false,
                checkAll: false,
                isIndeterminate: true,
                totalPrice: 0,
                checkedList: [],
                input: '',
                Goods: {
                    id: 1,
                    image: '',
                    name: '鞋子类型',
                    price: 279,
                    flags: [
                        "帆布鞋", "休闲鞋", "板鞋", "运动鞋"
                    ],
                },
                form: {
                    address: [],
                    number: 0,
                },
                province: [],
                total: 0,
                user: {},
                showUser: true,
                shoppingcart: [{}],
                selectedGoodsList: [],
                goodsList: [
                    {
                    id: 1,
                    number: 1,
                    goodsId: '',
                    image: '../style/404.jpg',
                    name: '原创独家樱花兔子花环可爱钥匙扣包包挂件礼物小吊坠饰',
                    price: 2700,
                    amount: 2700,
                    flags: [
                        "帆布鞋", "休闲鞋", "板鞋", "运动鞋"
                    ],
                }, {
                    id: 2,
                    number: 1,
                    goodsId: '',
                    image: '../style/404.jpg',
                    name: ' 扣包包挂件礼物小吊坠饰',
                    price: 188,
                    amount: 188,
                    flags: [
                        "帆布鞋", "休闲鞋", "板鞋", "运动鞋"
                    ],
                }, {
                    id: 3,
                    number: 1,
                    goodsId: '',
                    image: '../style/404.jpg',
                    name: '原创独家樱花兔子花环可爱钥匙扣包包挂件礼物小吊坠饰',
                    price: 100,
                    amount: 100,
                    flags: [
                        "帆布鞋", "休闲鞋", "板鞋", "运动鞋"
                    ],
                },
                ],
                restaurants: [],
                state: '',
                timeout: null
            }
        },
        computed: {

        },
        watch: {},
        created() {
            this.loadGoodsList()
            const user = window.localStorage.getItem('user')
            // console.log("user信息：" + user)
            if (user) {
                this.showUser = false
                this.user = JSON.parse(user)
            }
        },
        methods: {
             purchase(){
                        window.location.href = '/pages/front/order.html?id='+this.checkedList.join(',')
            },

            deleteGoods(type,id){
                    if (type === '批量' && id === null) {
                        if (this.checkedList.length === 0) {
                            return this.$message.error('请选择要删除的宝贝')
                        }
                    }
                    this.$confirm('确认要删除这些宝贝吗？?', '删除宝贝', {
                        'confirmButtonText': '确定',
                        'cancelButtonText': '取消',
                    }).then(() => {
                       axios.delete('/shoppingCart?ids='+(
                           type === '批量' ? this.checkedList.join(',') : id
                       )).then( (res => {
                               if(res.data.code === 1){
                                   this.loadGoodsList()
                               }else {
                                   this.$notify({
                                       type: 'info',
                                       message: res.data.data
                                   });
                               }
                           })
                       )
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },
            async addToShoppingCart(item){
                    let params = {
                        id: item.id,
                        name: item.name,
                        image: item.image,
                        userId: item.userId,
                        goodsId: item.goodsId,
                        goodsFlag: item.flags,
                        number: item.number,
                        amount: item.number*item.price,
                    }
                    const {data: res} = await axios.post('/shoppingCart/update',params)
                if(res.code === 1){
                    this.loadGoodsList()
                }else {
                    this.$notify({
                        title: "修改失败",
                        message: '修改失败',
                        type: 'warning',
                        duration: 2000
                    })
                }
                    // console.log(res.data)
                },



            handleCheckAllChange (val) {
                this.isIndeterminate = false;
                if (val == false) {
                    for (let i in this.goodsList) {
                        this.goodsList[i].checked = false
                    }
                } else {
                    for (let i in this.goodsList) {
                        this.goodsList[i].checked = true
                    }
                }
                this.setCart()
            },
            //数量改变
            qtyChange (value) {
                this.addToShoppingCart(value)
                // this.loadGoodsList()
                // console.log(value)
                this.setCart()
            },
            //单选框改变
            checkedChange (id) {
                // console.log(id)
                this.checkAll = this.goodsList.every(function (obj) {
                    return obj.checked == true
                })
                this.isIndeterminate = false
                this.setCart()
            },
            //购物车状态
            setCart () {
                let totalPrice = 0
                let allChecked = true

                this.checkedList=''
                this.goodsList.forEach((v, i) => {
                    if (v.checked) {
                       this.checkedList = [...this.checkedList,[v.id]]
                        totalPrice += v.number * v.price
                    } else {
                        allChecked = false
                    }
                })
                this.allChecked = allChecked
                this.totalPrice = totalPrice
            },
            handleChange(value) {
                // console.log(value);
            },
            toGoodsDetail(id) {
                window.requestAnimationFrame(() => {
                    window.location.href = '/pages/front/goodsDetail.html?id=' + id
                })
            },
            async logout() {
                const {data: res} = await axios.post('/user/logout')
                if (res.code === 1) {
                    localStorage.removeItem("user")
                    window.location.href = '/pages/front/index.html'
                }
            },

            async loadGoodsList() {
                const {data: res} = await axios.get('/shoppingCart/list')
                if (res.code === 1) {
                    // console.log(res.data)
                    this.goodsList = res.data
                } else {
                    this.$notify({
                        title: '警告',
                        message: '获取商品失败',
                        type: 'warning'
                    })
                }

            },
            getImage(image) {
                return `/common/download?name=${image}`
            }
        },
        mounted() {
            this.setCart()
        }
    })
</script>
</body>
</html>